<template>
  <el-container>
    <el-main>
      <el-card class="box-card">
        <template #header>
          <span>欢迎登录 滑动变组商城</span>
        </template>
        <el-form
          :model="formData"
          :rules="rules"
          ref="formDataRef"
          label-width="80px"
          @submit.prevent
        >
          <el-form-item label="用户名" prop="username">
            <el-input
              style="width: 80%"
              clearable
              placeholder="请输入用户名"
              v-model="formData.username"
            ></el-input>
          </el-form-item>
          <el-form-item v-if="isRegister" label="手机号" prop="phone">
            <el-input
              style="width: 80%"
              clearable
              placeholder="请输入手机号"
              @keydown.enter="submitForm"
              v-model="formData.phone"
            ></el-input>
          </el-form-item>
          <el-form-item label="密码" prop="password">
            <el-input
              style="width: 80%"
              clearable
              placeholder="请输入密码"
              @keydown.enter="submitForm"
              type="password"
              v-model="formData.password"
            ></el-input>
          </el-form-item>
          <el-form-item
            v-if="isRegister"
            label="确认密码"
            prop="confirmPassword"
          >
            <el-input
              style="width: 80%"
              clearable
              placeholder="请再次输入密码"
              type="password"
              @keydown.enter="submitForm"
              v-model="formData.confirmPassword"
            ></el-input>
          </el-form-item>
          <el-form-item>
            <el-button style="width: 80%" type="primary" @click="submitForm">
              {{ isRegister ? "注册" : "登录" }}
            </el-button>
          </el-form-item>
          <el-button
            style="float: right; padding-bottom: 10px"
            link
            @click="changeType"
          >
            {{ isRegister ? "返回" : "注册" }}
          </el-button>
        </el-form>
      </el-card>
    </el-main>
  </el-container>
</template>

<script setup>
import { ref, reactive, getCurrentInstance, nextTick, watch } from "vue";
import { useRoute, useRouter } from "vue-router";
const { proxy } = getCurrentInstance();
const route = useRoute();
const router = useRouter();

import md5 from "js-md5";

const formData = ref({});
const formDataRef = ref();

const isRegister = ref(false);

const changeType = () => {
  isRegister.value = !isRegister.value;
  // 重置表单
  formDataRef.value.resetFields();
};

const rules = {
  username: [
    { required: true, message: "请输入用户名", trigger: "blur" },
    {
      min: 3,
      max: 15,
      message: "用户名长度在 3 到 15 个字符",
      trigger: "blur",
    },
  ],
  phone: [{ required: true, message: "请输入手机号", trigger: "blur" }],
  password: [
    { required: true, message: "请输入密码", trigger: "blur" },
    { min: 6, message: "密码长度不能小于 6 位", trigger: "blur" },
  ],
  confirmPassword: [
    { required: true, message: "请确认密码", trigger: "blur" },
    {
      validator: (rule, value, callback) => {
        if (value !== formData.value.password) {
          callback(new Error("两次输入密码不一致!"));
        } else {
          callback();
        }
      },
      trigger: "blur",
    },
  ],
};

import { useUserInfoStore } from "@/stores/UserInfoStore";
const userInfoStore = useUserInfoStore();

const submitForm = () => {
  formDataRef.value.validate(async (valid) => {
    if (!valid) {
      return;
    }
    let params = {};
    Object.assign(params, formData.value);
    if (!isRegister.value) {
      // 登录使用md5加密
      params.password = md5(params.password);
    }
    let result = await proxy.Request({
      method: "post",
      url: isRegister.value ? proxy.Api.register : proxy.Api.login,
      params,
    });
    if (!result) {
      return;
    }
    if (isRegister.value) {
      proxy.Message.success("注册成功");
      changeType();
      return;
    }
    // 如果是登录，则记录token信息到本地
    localStorage.setItem("token", result.data.token);
    // 保存状态信息
    userInfoStore.setUserInfo(result.data);
    if (result.data.isAdmin) {
      // 进入管理员界面
      router.push("/admin");
    } else {
      // 进入用户界面
      router.push("/main");
    }
  });
};
</script>

<style lang="scss" scoped>
.box-card {
  width: 100%;
  max-width: 400px;
  margin: 50px auto;
}
</style>